<template>
    <div>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h1 v-text="$t('reset.request.title')">Reset your password</h1>

                <div class="alert alert-danger" v-html="$t('reset.finish.messages.keymissing')" v-if="keyMissing">
                    <strong>The password reset key is missing.</strong>
                </div>

                <div class="alert alert-danger" v-if="error">
                    <p v-text="$t('reset.finish.messages.error')">
                        Your password couldn't be reset. Remember a password request is only valid for 24 hours.
                    </p>
                </div>

                <div class="alert alert-success" v-if="success">
                    <span v-html="$t('reset.finish.messages.success')"><strong>Your password had been reset.</strong>
                        Please </span>
                    <a class="alert-link" v-on:click="openLogin"
                        v-text="$t('global.messages.info.authenticated.link')">sign in</a>
                </div>
                <div class="alert alert-danger" v-if="doNotMatch">
                    <p v-text="$t('global.messages.error.dontmatch')">The password and its confirmation do not match!
                    </p>
                </div>

                <div class="alert alert-warning" v-if="!success && !keyMissing">
                    <p v-text="$t('reset.finish.messages.info')">Choose a new password.</p>
                </div>

                <div v-if="!keyMissing">
                    <form v-if="!success" name="form" role="form" v-on:submit.prevent="finishReset()">
                        <div class="form-group">
                            <label class="form-control-label" for="newPassword"
                                v-text="$t('global.form[\'newpassword.label\']')">New password</label>
                            <input type="password" class="form-control" id="newPassword" name="newPassword"
                                v-bind:placeholder="$t('global.form[\'newpassword.placeholder\']')"
                                :class="{ valid: !$v.resetAccount.newPassword.$invalid, invalid: $v.resetAccount.newPassword.$invalid }"
                                v-model="$v.resetAccount.newPassword.$model" minlength="4" maxlength="50" required data-cy="resetPassword" />
                            <div v-if="$v.resetAccount.newPassword.$anyDirty && $v.resetAccount.newPassword.$invalid">
                                <small class="form-text text-danger" v-if="!$v.resetAccount.newPassword.required"
                                    v-text="$t('global.messages.validate.newpassword.required')">
                                    Your password is required.
                                </small>
                                <small class="form-text text-danger" v-if="!$v.resetAccount.newPassword.minLength"
                                    v-text="$t('global.messages.validate.newpassword.minlength')">
                                    Your password is required to be at least 4 characters.
                                </small>
                                <small class="form-text text-danger" v-if="!$v.resetAccount.newPassword.maxLength"
                                    v-text="$t('global.messages.validate.newpassword.maxlength')">
                                    Your password cannot be longer than 50 characters.
                                </small>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label" for="confirmPassword"
                                v-text="$t('global.form[\'confirmpassword.label\']')">New password confirmation</label>
                            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                                :class="{ valid: !$v.resetAccount.confirmPassword.$invalid, invalid: $v.resetAccount.confirmPassword.$invalid }"
                                v-bind:placeholder="$t('global.form[\'confirmpassword.placeholder\']')"
                                v-model="$v.resetAccount.confirmPassword.$model" minlength="4" maxlength="50"
                                required data-cy="confirmResetPassword" />
                            <div
                                v-if="$v.resetAccount.confirmPassword.$anyDirty && $v.resetAccount.confirmPassword.$invalid">
                                <small class="form-text text-danger"
                                    v-if="!$v.resetAccount.confirmPassword.sameAsPassword"
                                    v-text="$t('global.messages.error.dontmatch')">
                                    The password and its confirmation do not match!
                                </small>
                            </div>
                        </div>
                        <button type="submit" :disabled="$v.resetAccount.$invalid" class="btn btn-primary"
                            v-text="$t('password.form.button')" data-cy="submit">
                            Save
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" src="./reset-password-finish.component.ts"></script>
